<!--评论展示模块，评论id为0的-->

<template>
  <div class="">
    <v-card class="w-100 my-6">
      <div class="d-flex justify-start">
        <!--        // 头像地址：https://cdn.chikytech.com/chikyCloud/test/e6692dcb1834dfd3a592d9f6914e6a94.jpeg-->
        <div class="pl-2 pt-3">
          <v-avatar image="https://cdn.chikytech.com/chikyCloud/test/e6692dcb1834dfd3a592d9f6914e6a94.jpeg"
                    size="64"></v-avatar>
        </div>
        <div class="ml-3">
          <p class="my-1 d-flex justify-start font-weight-medium text-body-2">技术巨佬CT</p>
          <p class="my-1 d-flex justify-start font-weight-bold text-subtitle-2 ">
            我随随便便就可以做个微服务项目，在南山区无人能比</p>
          <div class="d-flex justify-start align-center text-body-2 text-blue-grey">
            <p class="d-flex justify-start ">2023-6-09 13:09:12</p>
            <!--点赞-->
            <v-btn
              @click="clickUp"
              class="mx-1 ml-2"
              variant="text"
              icon="mdi-thumb-up"
              :color="up_style"
            ></v-btn>
            <p>{{ app_store.up01 + (app_store.comments > 0 ? 1 : 0) }}</p>
            <!--  踩一踩-->
            <v-btn
              @click="clickDown"
              class="ml-5 mx-1"
              variant="text"
              icon="mdi-thumb-down"
              :color="down_style"
            ></v-btn>
            <p>{{ app_store.down01 + (app_store.comments < 0 ? 1 : 0) }}</p>
            <p style="cursor: pointer" class="ml-6">回复</p>
          </div>
        </div>
      </div>

    </v-card>
  </div>
</template>

<script setup>
import {defineProps, defineEmits, computed} from "vue";
import {useAppStore} from "@/store/app";

const app_store = useAppStore();

// 定义父组件传递的 props
const props = defineProps({
  up: {
    type: Number,
    required: true
  },
  down: {
    type: Number,
    required: true
  },
});

const emit = defineEmits(['message_up', 'message_down']);
const clickUp = () => {
  if (app_store.comments === 1) {
    app_store.comments = 0;
  } else {
    app_store.comments = 1;
  }
}
const clickDown = () => {
  if (app_store.comments === -1) {
    app_store.comments = 0;
  } else {
    app_store.comments = -1;
  }
}
let up_style = computed(() => {
  if (app_store.comments === 1) {
      return "blue-lighten-2";
  }else {
    return "blue-grey-lighten-3";
  }
})

let down_style = computed(() => {
  if (app_store.comments === -1) {
    return "red-lighten-2";
  }else {
    return "blue-grey-lighten-3";
  }
})
</script>

<style scoped>

</style>
